<template>
  <div>
    <div class="nav">
      <h1>公告模块</h1>
      <el-button class="btn"
        ><router-link to="/send_notice">添加公告</router-link></el-button
      >
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="日期" width="300">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{
            scope.row.date | formatData
          }}</span>
        </template>
      </el-table-column>

      <el-table-column label="标题" width="300">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.title }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
            查看
          </el-button>
          <el-button size="mini" @click="handleDele(scope.$index, scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 查看通告详情弹框 -->
    <el-dialog title="详情" :visible.sync="dialogVisible" width="30%">
      <el-descriptions class="margin-top" :column="1" border>
        <el-descriptions-item>
          <template slot="label"> 所属单位 </template>
          {{ msg.collage }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 发布日期 </template>
          {{ msg.date | formatData }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 公告标题 </template>
          {{ msg.title }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 内容 </template>
          {{ msg.message }}
        </el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  created () {
    this.get_notice();
  },
  data () {
    return {
      dialogVisible: false,
      tableData: [],
      msg: {},
    };
  },
  // 处理时间格式
  filters: {
    formatData (time, arg) {
      return new Date(time).toLocaleString();
    },
  },
  methods: {
    handleEdit (index, row) {
      this.dialogVisible = true;
      this.msg = row;
      // console.log(this.msg);
    },
    handleDele (index, row) {
      console.log(row);
      this.$http
        .post(
          "http://127.0.0.1:8080/minAdmin/dele_notice",
          this.$qs.stringify(row)
        )
        .then((res) => {
          if (res.data.status == 0) {
            this.$message.success(res.data.message);
            this.get_notice();
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    get_notice () {
      this.$http
        .get("http://127.0.0.1:8080/minAdmin/get_notice")
        .then((res) => {
          // console.log(res);
          this.tableData = res.data.data;
        });
    },
  },
};
</script>
<style lang="less" scoped>
.el-table {
  margin: 10px auto;
}
.nav {
  display: flex;
  justify-content: space-between;
}
</style>
